<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
       <!-- 引入Vue 全局注册一个名为Vue的构造函数 -->
       <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 插值语法 -->
    <!-- <div id="app-1">
           {{message}}
    </div>

    <script>
        var app =new Vue(
            {
                //element的缩写，挂载元素
                el:"#app-1",
                data:{
             message:"Hello Vue!"
                }
            }
        )
    </script> -->
   <!-- 指令语法 v-bind: 单向绑定-->
    <!-- <div id="app-2">
        <span v-bind:title="message">鼠标悬停几秒查看动态绑定信息</span>
    </div>
<script>
    var app2=new Vue(
        {
            el:"#app-2",
            data:{
                message:'页面加载于 ' + new Date().toLocaleString()
            }
        }
    )
</script>
<!-- 指令语法 v-model: 双向绑定-->
<!-- v-model只能应用在表单类元素上（输入类元素。input select radio checkbox等）可以简写为v-model="" 因为model默认收集的就是value的值-->
     <div id="app-2">
       <input type="text" v-model="message">
       <input type="text" v-bind:value="message">
       <span>message:{{message}}</span>
    </div>
<script>
    var app2=new Vue(
        {
            el:"#app-2",
            data:{
                message:"你好"
            }
        }
    )
</script>

<!-- el和data的两种写法 -->

<div id="root1">
    {{name}}
</div>
<script>
// el的两种写法
//   const v = new Vue({
//     el:"#root1",
//     data:{
//        name:"李彤康" 
//     }
//    })

//    console.log(v)
//    v.$mount("#root1")
//  data的两种写法  组件使用函数式data写法
  const v = new Vue({
    el:"#root1",
    // data:{
    //    name:"李彤康" 
    // }

    data(){
        return{
  name:"李彤康"
        }
    }
   })
</script>

<!-- vue数据代理，Object.defineProperty方法 不可枚举-->
<script>

    let num=20;
    let person={
        name:'张三',
        sex:'男'
    }
    Object.defineProperty(person,'age',{
        //value:"18",
       // enumerable:true,//控制属性是否可以枚举
       // writable:true,//控制属性可以被修改
       // configurable:true,//控制属性是否可以被删除
        get(){
          return num;
        },
        set(value){
          num=value;
        }
    })

    console.log(person);
   // console.log(Object.keys(person))
</script>

<!-- vue中的数据代理 -->
<!-- 事件点击,事件修饰符 prevent阻止默认事件，stop阻止事件冒泡,once事件只触发一次,capture使用事件捕获模式，-->
<!-- 修饰符可以连续写    self只有event.target是当前对象的时候才触发事件,passive事件默认行为立即执行，无需等待事件回调执行完毕 -->
<div id="root2">
    <button @click="showtest($event,66)">点击测试</button>

    <a href="www.baidu.com" @click.prevent="showtest">超链接</a>
    <div @click="showInfo">
        <button @click.stop="showInfo">测试事件冒泡</button>
    </div>
    <button @click.once="showInfo">测试once属性</button>

    <div @click.capture="showInfo(1)">
        <button @click="showInfo(2)">测试捕获事件</button>
    </div>

    <div @click.self="showInfo(1)">
        <button @click="showInfo(2)">测试捕获事件</button>
    </div>
</div>
<script>
    new Vue({
    el: '#root2',
    data: {},
    methods:{
        showtest(event,num){
            alert(event.target.innerText+num);
        },
        showInfo(a){
            alert("跳转阻挡测试"+a);
        }
    }
    })
</script>
<!-- 键盘事件 特殊:tab 必须配合keydown去使用-->
<div id="root3">
    <input type="text" @keyup.ctrl.y="showInfo">
</div>

<script>
    new Vue({
    el: '#root3',
    data: {

    },
    methods:{
        showInfo(){
            alert("键盘事件成功显示");
        }
    }
    })
</script>

<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app3=new Vue(
        {
            el:"#app-3",
            data:{
                seen:true
            }
        }
    )
</script>

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>

console.log();

    var app4=new Vue(
        {
            el:"#app-4",
            data:{
                todos:[{text:"学习java代码"},
            {text:"学习python代码"},
            {text:"学习c代码"}]
        }
    }
    )
</script>

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage()">反转消息</button>
</div>
<script>
    var app5=new Vue({
        el:"#app-5",
        data:{
         message:"我去年买了个表"
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split("").reverse().join("")
            }
        }
    })
</script> 
<!-- v-if可以和v-else 一起使用，及多条件查询语句v-else-if,v-show控制的是元素的display属性可以在页面上显示 v-if='false'将整段标签删除-->
<!-- <template></template>标签不会在html中显示，可以搭配v-if去使用，但不可以搭配v-show -->
<div id="app-6">
    <template>
    <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>
    </template>
</div>

<script>

    var app6=new Vue({
        el:"#app-6",
        data:{
            type:"B"
        }
    })
</script>

<!-- 列表渲染 -->
<!-- 修改下标的话要用set( , , ) 修改什么 ,修改下标，修改内容 -->
<!-- for循环也可以渲染对象 -->
<!-- $forceUpdate 可以用来强制渲染 -->
<!-- $set的使用 -->
<div id="ulapp">
    <ul >
        <li v-for="(item,index) in items"> {{item.message}} -- {{index}}</li>
    </ul>

    <ul>
        <li v-for="(val,key) in obj">{{val}}--{{key}}</li>
    </ul>
    <button @click="addLi">添加</button>
    <button @click='updateLast'>修改最后一个</button>
</div>

<script>
    var app = new Vue({
        el: "#ulapp",
        data: {
            items: [
                {message: 'first'},
                {message: 'second'}
            ],
            obj:{
                name:'李彤康',
                age:'22',
                sex: '男'
            }
        },
        methods: {
            addLi: function() {
                this.items.push({message: 'third'});
            },
            updateLast: function(){
            // this.$set(this.items,this.items.length-1,{message:'修改完成'});
            this.items[this.items.length-1]={message:'强制渲染'}
            this.$forceUpdate();
            }
        }
    });
</script>

<div id="app-8">
    <button v-on:click="greet()">Greet</button>
</div>

<script>
    var app =new Vue({

        el:"#app-8",
        data:{
           message:"hello,小李"
        },
        methods:{
          greet:function(){
         alert(this.message);
          }
        }
    })
   
</script>

<!-- 表单输入绑定 -->
   <div id="app-9">
    <!-- <input type="text" v-model="message" value="Hell">
    <p>message is:{{message}}</p> -->
   
   <!-- <span>Multiline message is:</span>
   <p style="white-space: pre-line;">{{ message }}</p>
   <br>
   <textarea v-model="message" placeholder="add multiple lines"></textarea> -->

   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
   <script>
    // var app = new Vue({
     
    //     el:"#app-9",
    //     data:{
    //         message:"Hello Vue"
    //     }
    // })

    var app2 =new Vue({
        el:"#app-9",
        data:{
           checkedNames:[]
        }
    })
   </script>

   <div id="app-10">
      <select v-model="selected">
        <option value="" >请选择</option>
        <option >Abc</option>
        <option >B</option>
        <option >C</option>
      </select>

      <span>selected:{{selected.split('').reverse().join('')}}</span>
      <!-- <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>Abc</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span> -->
   </div>

   <script>
    var app =new Vue({
        el:"#app-10",
        data:{
            selected:""
        }
    })
   </script>


</body>
</html>